<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,thead,tbody,td{
            border: 2px solid #000;
        }
        thead td{
            width: 200px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        tbody td{
            text-align: center;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>编号</td>
                <td>名字</td>
                <td>年龄</td>
                <td>电话号</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="list"></tbody>
    </table>
    <script>
        // 一个数组,数组里5个对象,包含id,name,age,tel属性
        // 把数组渲染到table里
        // table每行都有删除功能
        // 1.删除数组里的数据,根据条件找到下标,根据下标删除
        // 2.页面上效果remove
        var arr=[1,"刘德华",20,13512345678];
        var oList=document.querySelector("#list");
        var str=``;
        arr.forEach((item,index)=>{
            str=`
                <tr>
                    <td>${arr[0]}</td>
                    <td>${arr[1]}</td>
                    <td>${arr[2]}</td>
                    <td>${arr[3]}</td>
                    <td><a data-id=${arr[0]-1} href="javascript:void(0)">删除</a></td>
                </tr>
            `
        })
        oList.innerHTML=str;

        oList.addEventListener("click",evt=>{
            var e=evt||window.event;
            var ele=e.target||e.srcElement;
            if(!(ele.nodeName=="A")){
                return;
            }
            // 找到id,根据id删除数据
            var id=ele.getAttribute("data-id");
            oList.forEach((item,index)=>{
                if(item.value==id){
                    oList.splice(index,1);
                }
                
            });
            ele.parentNode.parentNode.remove();
        })
    </script>
</body>
</html>